<template>
  <div class="card-container">
    <div class="card" v-for="(card, index) in cards" :key="index">
      <div class="card-header">
        <div class="card-title">
          <div class="title-line1">{{ card.titleLine1 }}</div>
          <div class="title-line2">{{ card.titleLine2 }}</div>
        </div>
        <div class="card-icon">
          <el-icon :size="20" :color="card.trendColor">
            <component :is="card.trendIcon" />
          </el-icon>
        </div>
      </div>
      <div class="card-value">{{ card.value }}</div>
      <div class="card-footer" :style="{ color: card.trendColor }">
        <span>{{ card.trendValue }}</span>
        <el-icon :size="12">
          <component :is="card.trendArrow" />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  ArrowUp,
  ArrowDown,
  Minus,
  TrendCharts,
  User,
  Money
} from '@element-plus/icons-vue'

interface Card {
  titleLine1: string
  titleLine2: string
  value: string
  trendValue: string
  trendIcon: any
  trendArrow: any
  trendColor: string
}

const cards = ref<Card[]>([
  {
    titleLine1: '日活跃用户数量',
    titleLine2: 'Daily Active User',
    value: '12,138',
    trendValue: '+25',
    trendIcon: User,
    trendArrow: ArrowUp,
    trendColor: '#67C23A'
  },
  {
    titleLine1: '月活跃用户数量',
    titleLine2: 'Monthly Active User',
    value: '12,138',
    trendValue: '+45',
    trendIcon: User,
    trendArrow: ArrowUp,
    trendColor: '#67C23A'
  },
  {
    titleLine1: '用户数量',
    titleLine2: 'Number Of Users',
    value: '112,138',
    trendValue: '-5',
    trendIcon: TrendCharts,
    trendArrow: ArrowDown,
    trendColor: '#F56C6C'
  },
  {
    titleLine1: '总收入',
    titleLine2: 'Total Revenue',
    value: '12,138,888',
    trendValue: '0',
    trendIcon: Money,
    trendArrow: Minus,
    trendColor: '#909399'
  }
])
</script>

<style scoped>
.card-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 20px;
}

.card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.card-title {
  text-align: left;
}

.title-line1 {
  font-size: 14px;
  color: #606266;
  margin-bottom: 4px;
}

.title-line2 {
  font-size: 12px;
  color: #909399;
}

.card-icon {
  padding: 4px;
  background: rgba(103, 194, 58, 0.1);
  border-radius: 4px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
  text-align: left;
}

.card-footer {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}


.trend-up {
  color: #67C23A;
}

.trend-down {
  color: #F56C6C;
}

.trend-neutral {
  color: #909399;
}


</style>
